<!DOCTYPE html>
<html lang="zh-Hans-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>随说详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="zhz">
    <meta name="time" content="2022/3/23">
    <link href="/static/img/favicon.ico" rel="shortcut icon">
    <link href="/static/css/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/my/common/default.css" rel="stylesheet">
    <link href="/static/css/my/casualWordDetail.css" rel="stylesheet">
    <link href="/static/css/my/common/header.css" rel="stylesheet">
    <link href="/static/css/my/common/modal.css" rel="stylesheet">
</head>
<body>

<div class="myContainer">
    <div th:replace="~{common/header}"></div>
    <main id="main" class="w-100 d-flex justify-content-center align-items-center">
        <div class="casualWordDetail overflow-auto">
            <div class="casualWordContent">
                <div class="head d-flex align-items-center">
                    <img th:src="${userHeadPortrait}" alt="" width="35" height="35" class="rounded-circle"
                         th:onclick="'window.location.href = ' + '\'' + '/userFriendProfile/' + ${publisherId} + '\''"
                         title="点击查看Ta的资料">
                    <span th:text="${username}" title="点击查看Ta的资料"
                          th:onclick="'window.location.href = ' + '\'' + '/userFriendProfile/' + ${publisherId} + '\''">
                    </span>
                    <span th:text="${time}" class="time" style="margin-left: auto"></span>
                    <button th:if="${isMyCasualWord}" th:value="${casualWordId}" onclick="showDeleteModal()"
                            class="btn btn-danger btn-sm" id="deleteCasualWordBtn">删除
                    </button>
                </div>
                <div class="mainContent">
                    <span th:text="${textContent}" class="d-flex"></span>
                    <img th:if="${image} != null" th:src="${image}" alt="">
                    <video controls th:if="${video} != null" th:src="${video}" type="video/mp4"></video>
                </div>
                <div class="footer d-flex justify-content-end">
                    <input type="hidden" th:value="${casualWordId}">
                    <input type="hidden" value="1">
                    <img th:if="!${isLike}" onclick="unlikeOrLike(this)" title="点赞"
                         alt="" height="20" width="20" src="/static/img/unlike.svg">
                    <img th:if="${isLike}" onclick="unlikeOrLike(this)" title="取消点赞"
                         alt="" height="20" width="20" src="/static/img/like.svg">
                    <img onclick="showCommentModal(this)" src="/static/img/comment.svg" title="评论" alt=""
                         height="20" width="20">
                </div>
            </div>
            <div style="background-color: white;height: 5px"></div><!--随说内容和随说评论的分割线-->
            <div class="casualWordComment">
                <div th:each="comment:${comments}" class="aComment">
                    <div class="d-flex align-items-center">
                        <input type="hidden" th:value="${comment.getIntValue('commentId')}">
                        <input type="hidden" value="2">
                        <img th:src="${comment.getString('headPortrait')}" class="rounded-circle" height="35"
                             width="35px" alt="">
                        <a th:href="'/userFriendProfile/' + ${comment.getIntValue('commenterId')}"
                           th:text="${comment.getString('commenterName')}">
                        </a>
                        <span th:if="${comment.getBooleanValue('hasRespondent')}">回复</span>
                        <a th:href="'/userFriendProfile/' + ${comment.getIntValue('respondentId')}"
                           th:if="${comment.getBooleanValue('hasRespondent')}"
                           th:text="${comment.getString('respondentName')}">
                        </a>
                        <span>：</span>
                        <span th:text="${comment.getLongValue('time')}" class="time"
                              style="margin-left: auto"></span>
                        <span onclick="showCommentModal(this)" class="responseComment">回复</span>
                    </div>
                    <span th:text="${comment.getString('commentText')}" class="d-block"></span>
                </div>
                <div id="pagination" class="pagination pagination-sm d-flex justify-content-center align-items-center">
                    <input th:value="${totalPages}" id="totalPages" type="hidden"><!--总页数、当前页、当前请求路径-->
                    <input th:value="${currentPage}" id="currentPage" type="hidden">
                    <input th:value="${currentPath}" id="currentPath" type="hidden">
                </div>
            </div>
        </div>
    </main>
</div>

<div th:replace="~{common/modal}"></div>
<script src="/static/js/bootstrap/bootstrap.bundle.min.js"></script>
<script src="/static/js/jquery/jquery-3.6.0.min.js"></script>
<script src="/static/plugins/jq-paginator/jq-paginator.min.js"></script>
<script src="/static/js/my/common/publishCommentOrAnswerModal.js"></script>
<script src="/static/js/my/common/noticeModal.js"></script>
<script src="/static/js/my/common/formatTimeStamp.js"></script>
<script src="/static/js/my/common/casualWord.js"></script>
<script src="/static/js/my/casualWordDetail.js"></script>
<script src="/static/js/other/background.js"></script>
<script src="/static/js/my/common/pagination.js"></script>
</body>
</html>